<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!-- 
		元素属性操作：针对固定属性、附加属性操作
		元素  固定属性---清楚：元素是否可用属性 【w3c元素出现设置属性】
		      附加属性---清楚：表单为主，附加属性cheched、disabled...
		prop() ---功能与atter类似，附加属性，针对表单，默认选中
		removeProp()   ---功能：与removeattr类似，附加属性，针对表单，移除选中
		 --> 
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1> 
		<input type="checkbox" id="myCheckBox" checked/>
		<button id="setAttrBtn">设置属性</button>
		<button id="getProBtn" >获取属性</button>
		<button id="removeProBtn" >移除属性</button>
		<div id="output"></div>
		<script>
			/* prop()   点击--获取属性--打印复选框的值
			                           复选框的值是：+变量
			   prop()--input元素--checked--属性值bool[true,false]
			*/
		   $("#getProBtn").click(function(){
			   //prop()获取元素的附加属性--input中checked
			   var isChecked=$("#myCheckBox").prop("checked");
			   $("#output").text("复选框的值是："+isChecked);
		   });
		   //prop("checked",false) 取消选中
		   $("#setAttrBtn").click(function(){
		   	$("#myCheckBox").prop("checked",false);
		   	$("#output").text("复选框的值是：false");
		   });
		   //removeProp("checked")  取消选中--删除 checked属性
		   $("#removeProBtn").click(function(){
		   	$("#myCheckBox").removeProp("checked");
		   	$("#output").text("复选框属性已经移除");
			});
		</script>
	</body>
</html>